*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
html,body {
    width: 100%;
    height: 100%;
}
            
.swiper-container {
    width: 100%;
    height: 100%;
    .swiper-wrapper{
        .swiper_one{
            background: url(../images/0.jpg);
            background-size: 100% 100%;
            text-align: center;
            img:nth-of-type(1){
                margin-top: 250px;
                animation: fade 1s linear 0s 2 alternate;
            }
        }
        .swiper_two{
            background: url(../images/6.jpg);
            background-size: 100% 100%;
            text-align: center;
            p:nth-of-type(1){
                img{
                    margin-top: 100px;
                }
            }
            p:nth-of-type(2){
                img{
                    margin-top: 30px;
                } 
            }
            p:nth-of-type(3){
                img{
                    margin-top: 30px;
                } 
            }
            p:nth-of-type(4){
                img{
                    margin-top: 30px;
                }
            }
            p:nth-of-type(5){
                img{
                    margin-top: 30px;
                }
            }
            p:nth-of-type(6){
                img{
                    margin-top: -150px;
                    margin-left: 250px;
                }
            }
        }
        .swiper_three{
            background: url(../images/7.jpg);
            background-size: 100% 100%;
            text-align: center;
            p:nth-of-type(1){
                img{
                    margin-top: 100px;
                }
            }
            p:nth-of-type(2){
                img{
                    margin-top: 30px;
                } 
            }
            p:nth-of-type(3){
                img{
                    margin-top: 30px;
                } 
            }
        }
        .swiper_four{
            background: url(../images/8.jpg);
            background-size: 100% 100%;
            text-align: center;
            p:nth-of-type(1){
                img{
                    margin-top: 100px;
                }
            }
            p:nth-of-type(2){
                img{
                    margin-top: 30px;
                } 
            }
            p:nth-of-type(3){
                img{
                    margin-top: 30px;
                } 
            }
        }
        .swiper_five{
            background: url(../images/9.jpg);
            background-size: 100% 100%;
            text-align: center;
            p{
                font-size: 28px;
                color: #282C30;
            }
        }
    }
    .roll_up{
        height: 30px;
        width: 100%;
        position: absolute;
        bottom: 20px;
        z-index: 99;
        text-align: center;
        #lock{
            width: 30px;
            height: 25px;
            box-sizing: border-box;
            animation: up 1.5s linear 0s infinite alternate;
        }
    }
    #music{
        position: absolute;
        top: 45px;
        width: 40x;
        height: 40px;
        z-index: 99;
        box-sizing: border-box;
        animation: music_cirle 1.5s linear 0s infinite alternate;
    }
    #music_fly{
        position: absolute;
        top: 20px;
        right: 10px;
        z-index:98;
        width: 60px;
        height: 60px;
    }
}
@-webkit-keyframes fade {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}
@-webkit-keyframes up{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(-20px);
        opacity: 0;
    }
}
@-webkit-keyframes music_cirle{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
